<template>
  <div style="border: 3px dashed darkgray">
    <el-row>
      <el-col :span="24" style="background-color: papayawhip;height: 50px;border: 2px dashed darkgray" ><div>
        <th style="padding-top: 15px;padding-left: 10px">我的订单</th>
      </div></el-col>
    </el-row>
    <el-row style="background-color: white">
      <el-table :data="list"   @selection-change="handleSelectionChange " style=" height: 100%;width: 100%;background-color: papayawhip;border: 2px dashed darkgray"  :stripe="true"  >
        <el-table-column prop="id" label="编号" width="180" sortable v-if="false"></el-table-column>
        <el-table-column prop="pa" label="快递单号" width="130"></el-table-column>
        <el-table-column prop="price" label="支付总金额" width="110"></el-table-column>
        <el-table-column prop="date" label="支付时间" width="180"></el-table-column>
        <el-table-column prop="out_trade_no" label="支付宝订单编号" width="180"></el-table-column>
        <el-table-column prop="province" label="省" width="120"></el-table-column>
        <el-table-column prop="city" label="市" width="120"></el-table-column>
        <el-table-column prop="district" label="区/县" width="120"></el-table-column>
        <el-table-column prop="address" label="详细地址" width="140"></el-table-column>
        <el-table-column prop="datetime" label="收货时间" width="150"></el-table-column>
        <el-table-column  label="订单状态" width="120">
          <template slot-scope="list">
            <p v-if="list.row.state==0">未发货</p>
            <p v-if="list.row.state==1">已发货</p>
            <p v-if="list.row.state==3">确认收货</p>
            <p v-if="list.row.state==2">申请退货中</p>
            <p v-if="list.row.state==4">已退货</p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <span v-if="scope.row.state==1" disabled="disabled">
            <el-button @click="yes(scope.row)">确认收货</el-button>
          </span>
            <span v-if="scope.row.state==0||scope.row.state==1" disabled="disabled">
            <el-button @click="dialogFormVisible=true;list=scope.row">退货</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="退货信息" :visible.sync="dialogFormVisible">
        <el-form :model="list">
          <el-form-item label="订单编号" hidden>
            <el-input v-model="list.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="快递名称">
            <el-input v-model="list.kuaidi" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="快递单编号">
            <el-input v-model="list.parcelid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="退货时间" hidden>
            <el-input v-model="list.returntime" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户编号" hidden>
            <el-input v-model="list.fuser=this.$store.state.user.list.id" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="list.remark" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
    <div>
    </div>

  </div>
</template>
<script>
import App from "../App";
export default {
  name: "Forder",
  components: {App},
  data(){
    return {
      list:{},
      fuser:'',
      dialogFormVisible: false,
    }
  },
  created() {
let a= this.$store.state.user.list
    console.log(a)
    if (a!=null){
      this.name=this.$store.state.user.list.username
    }
    this.fuser=this.$store.state.user.list.id;
    this.$http.post('/forder/selectall', {fuser:this.fuser}).then(data=>{
      this.list=data
      console.log(data)
    })
  },
  methods:{
    getList () {
      this.$http.post('/forder/selectall', {fuser:this.fuser}).then(data=>{
        this.list=data
        console.log(data)
      })
    },
    add(){
      this.dialogFormVisible = false
      this.$http.post('/freturns/fadd',{forder:this.list.id,kuaidi:this.list.kuaidi,parcelid:this.list.parcelid,
      fuser:this.fuser,returntime:this.list.returntime,remark:this.list.remark}).then(data => {
        this.$http.post('/forder/update',{fuser:this.fuser,id:this.list.id})
        this.$message.success('操作成功')
        this.getList()
      })//添加
    }
  ,
    yes(row){
      this.$http.post('/forder/update1',{fuser:this.fuser,id:row.id}).then(data => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    search () {
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>

.el-row {
  margin-bottom: 20px;}
:last-child {
   margin-bottom: 0;
 }

</style>

